/*
  学习目标：发布文章-静态结构准备
  步骤：
   1. 改造函数式组件
  2. 看文档，使用Card/Form/表单元素完成静态结构
  3. 调整内容
   学习目标：使用富文本组件
  步骤：
     1. 下包  --force表示忽略警告，强制安装

       学习目标：type切换时，控制图片的数量
        为了保留图片，不清空数组
  1. 定义计算属性showFileList
  2. 计算应该显示的结果
  3. 显示showFileList

  学习目标：知识点补充-history的使用
  作用；完全相同，都是获取history
  步骤：
     1. 👍useHistory: 没有设置过Route组件的，也可以使用useHistory
        1.1 useHistory 任意函数组件中都可以使用
        1.2 它有语法提示
     2. props.history： Route组件设置过匹配路由的，才有props.history
     3  通用utils/history.js  ： 没有限制

     学习目标：实现存草稿功能
    1. 改造API
    2.声明ref,存入draft的值
    3. 🔔点击草稿按钮时修改drarfRef的值为true 
     4. 取出draft的值，传值

     学习目标：上传图片的数量校验，以及默认值优化
     1. 默认值
     2. 判断数量，提示用户

      学习目标：编辑文章-获取数据、调整界面
  步骤：

  学习目标：编辑文章-回填表单数据

  学习目标：数据回填-处理type和图片的问题
  步骤：
  学习目标：实现编辑文章
  */
import { Breadcrumb, Button, Card, Checkbox, Form, Input, message, Modal, Radio, Select, Space, Upload } from 'antd';
import React, { Component, useEffect, useRef, useState } from 'react';
import { Link, useHistory } from 'react-router-dom';
// 2. 导入组件和样式
import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css';
// 4. css-modules修复最小高度问题
import styles from './index.module.scss'
import Channel from 'components/Channel';
import { getToken } from 'utils/storage';
import { UploadOutlined } from '@ant-design/icons';
import { baseURL } from 'utils/request';
import { getArticleDetail, submitArticle, submitWriteArticle } from 'api/article';
import { useParams } from 'react-router-dom';
// import history from 'utils/history';
const {Option}=Select;
export default function ArticlePublish(_props) {
  // const {id}=_props.match.params
  // 获取id
  const params=useParams()
  console.log('params  ----->  ', params)
  const {id}=params
  console.log('id  ----->  ', id);
  // 4. 调整下界面
  const getArticle=async (id)=>{
    const res=await getArticleDetail(id)
    console.log('res61  ----->  ', res);
    // 3. 回填表单数据
    // 🔔setFieldsValue() 给表单字段设置值
    const type=res.data.cover.type
    formRef.current.setFieldsValue({ ...res.data, type });
    // 1. 回填state.type的值
    setType(type)
    // 2. 回填fileList  🔔 string[] 转换为{url: string}[]
    setFileList(res.data.cover.images.map((item)=>({url:item})))
  }
  //   1. 创建ref
  const formRef=useRef(null)
  // 3. 挂载后，判断，有id就发请求
  useEffect(() => {
    if(id){
      getArticle(id)
    }
  }, [])
  
  const [imgUrl, setImgUrl] = useState('')
    const [fileList, setFileList] = useState([])
    const [type, setType] = useState(1)
    const props = {
        name: 'image',
        accept:".jpg,.png,.jpeg",
        action: `${baseURL}/v1_0/upload`,
        headers: {
          authorization: `Bearer ${getToken()}`,
        },
        // 上传文件改变时的状态
        onChange(info) {
        //   if (info.file.status !== 'uploading') {
        //     console.log(info.file, info.fileList);
        //   }
            console.log('info32  ----->  ', info);
            setFileList(info.fileList)
          if (info.file.status === 'done') {
            message.success(`${info.file.name} 上传成功`);
          } else if (info.file.status === 'error') {
            message.error(`${info.file.name} 上传失败`);
          }
        },
        onPreview(file){
            console.log('file31  ----->  ', file);
            // 2预览时存储文件
            // 3. 修复预览功能
            setImgUrl(file.url||file.thumbUrl)
        },
        beforeUpload(file){
            const allFileType=["image/png","image/jpg","image/jpeg"]
            console.log('file37  ----->  ', file);
            if(!allFileType.includes(file.type)){
                message.warning('上传的格式无效')
                return Upload.LIST_IGNORE
            }
        }
      };
      const handleChangeType=(changedValues, allValues)=>{
        console.log('62  ----->  ', changedValues, allValues);
        if(changedValues.type!==undefined){
          setType(changedValues.type)
        }
      }
      // type切换时，控制图片的数量
    const filterTypeList=fileList.filter((item,index)=>{
      if(type===0) return false
      if(type===1) return index===0
      return true
    })
    // 
    const draftRef=useRef(false)
     // 🔔 获取history的hooks
    const history=useHistory()
    // 发布事件
    const handleChangeSummit=async (values)=>{
      console.log('values80  ----->  ', values);
      const formDataSum={...values}
      // if(type===0){
      //   formDataSum.cover={
      //     type:type,
      //     images:[]
      //   }
      // }else{
      //   formDataSum.cover={
      //     type:type,
      //     images:filterTypeList.map((item)=>item.response.data.url)
      //   }

      // }
      formDataSum.cover={
            type:type,
            // 3. 修复数据转换的逻辑
            images:type===0?[]:filterTypeList.map((item)=>item.url||item.response.data.url)
          }
      delete formDataSum.type
      console.log('formDataSum  ----->  ', formDataSum);
      // 
      if(fileList.length<type){
        message.warning('图片数量不对')
        return
      }
      console.log('draftRef  ----->  ', draftRef.current);
      // 2. 提交时判断调用编辑的API
      if(id){
         // 🔔 记得传id回去
        await submitWriteArticle({id,...formDataSum},draftRef.current)
        // 提示用户
        message.success('编辑成功')
      }else{
        // 发送请求
        await submitArticle(formDataSum,draftRef.current)
        // 提示用户
        message.success('发布成功')
      }
      // 跳转路由
      history.push('/list')
    }
  return (
    <div style={{paddingTop:24}} className={styles.root}>
        <Card title={
          <Breadcrumb>
          <Breadcrumb.Item>
            <Link to='/home'>首页</Link>
          </Breadcrumb.Item>
          <Breadcrumb.Item>{id?'编辑':'发布'}文章</Breadcrumb.Item>
        </Breadcrumb>
        }  bordered={false}>
      <Form
      // 2. 绑定给Form组件
      ref={formRef}
      size="large"
      name="basic"
      labelCol={{
        span: 4,
      }}
      wrapperCol={{
        span: 20,
      }}
      autoComplete="off"
      onFinish={handleChangeSummit}
       // 💥 富文本设置了name属性要配合初始值
       initialValues={{
        content: '',
        type:1
      }}
      onValuesChange={handleChangeType}
    >
      <Form.Item
        label="标题"
        name="title"
        rules={[{ required: true, message: '标题不能为空!' }]}
      >
        <Input />
      </Form.Item>

      <Form.Item
        label="频道"
        name="channel_id"
        rules={[{ required: true, message: '频道不能为空!' }]}
      >
        <Channel style={{ width: 200 }}></Channel>
      </Form.Item>

      <Form.Item name="content" label="内容"
       rules={[{ required: true, message: '内容不能为空!' },
       {validator:(_,value)=>{
         if(value==='<p><br></p>'){
           return Promise.reject(new Error('内容不能为空!'))
         }
         return Promise.resolve()
       },
       message: '文章内容不能为空',
       }]}>
        {/* 3. 受控组件  💥FormItem会自动控制ReactQill为受控组件 */}
        <ReactQuill></ReactQuill>
      </Form.Item>
      {/* 2. 修改name */}
      <Form.Item label="封面" name="type">
            {/* 1. 静态组件 */}
            <Radio.Group>
              {/* 3. 修改value */}
              <Radio value={1}>单图</Radio>
              <Radio value={3}>三图</Radio>
              <Radio value={0}>无图</Radio>
            </Radio.Group>
          </Form.Item>
      <Form.Item wrapperCol={{ offset: 4 }}>
         {/* 🔔记得把fileList设置给Upload组件 ,fileList类似Input的value属性，控制它的值*/}
      <Upload listType="picture-card" {...props} fileList={filterTypeList}>
    {fileList.length<type &&<Button icon={<UploadOutlined />}></Button>}
  </Upload>
    <Modal title="封面预览" visible={!!imgUrl} footer={null} onCancel={()=>setImgUrl('')} centered={true}>
        <img width='100%' src={imgUrl}/>
      </Modal>
      </Form.Item>

      <Form.Item wrapperCol={{ 
         // 💥 从左向右偏移量
         offset: 4}}>
        <Space>
        <Button type="primary" htmlType="submit">
        {id?'编辑':'发布'}文章
        </Button>
        <Button type="primary" htmlType="submit" onClick={()=>draftRef.current=true}>
          存草稿
        </Button>
        </Space>
      </Form.Item>
    </Form>
    </Card>
      </div>
  )
}

